<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <!-- 1. 准备页面结构，在结构中使用到了逻辑中的数据变量 -->
    <div class="app">
        <div>我叫{{ name }}，今年{{age}}岁，性别{{sex}}，爱好{{hobby}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
        <div>我叫{{name}}，今年{{age}}岁，性别{{sex}}</div>
    </div>
</body>
<script>

    
    function render(el, obj){
        // 3. 获取元素
        const app = document.querySelector(el);
        // 保存元素初始内容
        const str = app.innerHTML;

        // 4. 准备保存页面结构中需要被替换的内容
        const arr = [];
        // 5. 遍历基础数据对象
        for(let i in obj){
            // 6. 根据遍历到的对象的键名，创建正则
            const reg = new RegExp("{{ *"+ i +" *}}", "g");
            // 7. 根据正则，查询页面结构内容中需要被替换的部分
            arr.push(...str.match(reg));
        }

        // 8. 将元素初始内容拷贝一份，防止修改原内容
        let s = str;
        arr.forEach(val=>{
            // 9. 创建正则，用于获取被替换部分的数据名，如"{{name}}"的name
            const reg = /[^{{ }}]+/;
            // 10. 根据遍历到的关键字，替换成初始数据对象的对应的属性值
            s = s.replace(val, obj[val.match(reg)[0]]);
        })
        // 11. 将最终替换完成的内容，设置回元素
        app.innerHTML = s;
    }


    // 2. 准备基础数据对象，用于解析页面结构中对应的数据内容
    const obj = {
        name:"张三",
        age:20,
        sex:"男",
        hobby:"篮球"
    }
    const obj2 = {
        name:"李四",
        age:25,
        sex:"女",
        hobby:"唱歌"
    }

    // 执行渲染功能
        // 参数1：要使用渲染功能的页面结构
        // 参数2：要渲染到页面结构的数据
    render(".app", obj);



    // obj.name = "李四"

    
</script>
</html>